<template>
  <div class="ctn">
    <div class="ctn_head"></div>
    <div class="ctn_body">
      <slot></slot>
    </div>
    <div class="ctn_height_tag">
      <span>iPhone 8手机高度</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PhoneCtn'
}
</script>

<style lang="less" scoped>
.ctn{
  position: relative;
  width: 375px;
  margin: 70px auto 200px auto;
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
  &_head{
    width: 100%;
    height: 64px;
    background: url('~@/assets/phone-head.png');
    background-size: cover;
  }
  &_body{
    min-height: 603px;
    background-color: #fff;
  }
  &_height_tag{
    position: absolute;
    top: 650px;
    left: -130px;
    height: 17px;
    width: 130px;
    border-bottom: 1px solid #dedede;
    color: #a2a2a2;
    text-align-last: left;
    span{
      font-size: 12px;
    }
  }
}
</style>
